import { MciEmpty } from '@/components/base';
import { useNodeResults } from '@/store/node-results';
import { ElTree } from 'element-plus';
import { onBeforeRouteLeave } from 'vue-router';
import { FlowContent } from './components/Flow';
import { decisionKey } from './types';
import './index.scss';
import { Splitpanes, Pane } from 'splitpanes';
import 'splitpanes/dist/splitpanes.css';
import { DecisionList } from './components/DecisionList';

export default defineComponent(() => {
  const route = useRoute();
  const execResultsStore = useNodeResults();

  onBeforeRouteLeave(() => {
    execResultsStore.clearResults();
  });

  const flowId = computed(() => {
    return route.query.flowId as string;
  });
  const isDetailMode = computed(() => {
    return !!flowId.value;
  });

  const treeRef = ref<InstanceType<typeof ElTree>>();
  const flowContentRef = ref<InstanceType<typeof FlowContent>>();
  // 导入
  const importData = reactive({
    flowId: '',
    importJSON: null
  });
  const setImportJSON = (flowId: string, data: any) => {
    importData.flowId = flowId;
    importData.importJSON = data;
  };

  const getListByVersionList = () => {
    return treeRef.value?.getListByVersionList();
  };

  provide(decisionKey, { importData, setImportJSON });
  return () => {
    return (
      <div class="w-full flex flex-row aaaaa">
        <Splitpanes class="default-theme" style={{ height: '100%', width: '100%' }}>
          <Pane min-size={10} size={20}>
            <DecisionList ref={treeRef} />
          </Pane>
          <Pane min-size={60}>
            {isDetailMode.value ? (
              <FlowContent
                onDelete={() => {
                  treeRef.value?.refreshDecisionList();
                }}
                ref={flowContentRef}
                flowVersionList={getListByVersionList()}
              />
            ) : (
              <div class="bg-white w-full h-full flex items-center justify-center">
                <MciEmpty tipText={'暂无数据'} />
              </div>
            )}
          </Pane>
        </Splitpanes>
      </div>
    );
  };
});
